<template>
	<div class="release">
		<div class="desc">
			<p>抱歉，未查到贵宝店！</p>
			<p>您可以免费发布需求让更多的宝创客为您制作。</p>
			<p>制作的结果会以短信的形式通知到您的手机上！</p>
		</div>
		<div class="content">
			<select name="" v-model="platform">
				<option v-for="item in platforms" :value="item.id">{{item.cat_name}}</option>
			</select>
			<textarea v-model="address" rows="5" cols="40" placeholder="粘贴店铺地址"></textarea>
			<textarea v-model="descript" maxlength="50" rows="5" cols="40" placeholder="50字以内简述（可不填）"></textarea>
			<input v-model="phone" maxlength="11" type="number" placeholder="接受通知手机号" />
		</div>
		<div class="btn" @click="submitVal">发布需求</div>
	</div>
</template>

<script>
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	export default{
		data(){
			return{
				platform : '',
				address  : '',
				descript : '',
				phone    : '',
				comefrom : ''
				
			}
		},
		watch:{

		},
		props:{
			platforms:{
				type : Array,
				default: () =>{
					return []
				}
			}
		},
		methods:{
			submitVal(){
				let info = {
					userinfo : {
						uid : getUrlParam('uid') || '',
						token : getUrlParam('token') || ''
					},
					partform_type 	 : 'release',
					id	 			 : this.platform,
					shop_url 		 : this.address,
					shop_description : this.descript,
					phone      		 : this.phone,
					comefrom         : this.comefrom,
					quantity         : 0,
					user_realease	 : 1
				}
				let valiResult = this.valiForm()
				if(valiResult.status){
					this.$axiosPost('/api/onlinestore/releaseDemand',{
						data : JSON.stringify(info)
					}).then( res => {
						if(res.code === 200){
							let _this = this
							this.$vux.alert.show({
								title: '发布成功',
								content : '制作结果会以短信的形式通知到您的手机上',
								onHide () {
								   _this.$emit('close')
								   window.location.reload()
								}
							})
						}
					})
				}else{
					this.$vux.toast.text(valiResult.msg,'top')
				}
			},
			isWeiXin(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			       	this.comefrom = 2
			    }else{
			    	this.comefrom = 1
			    }
			},
			valiForm(){
				let result = {
					status : false,
					msg    : ''
				}
				if(!this.platform){
					result.msg = '请选择平台'
					return result
				}
				if(!/^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/.test(this.address)){
					result.msg = '请输入正确的链接'
					return result
				}
				if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)){
					result.msg = '请输入正确的的手机号码'
					return result
				}
				result.status = true
				return result
			}
		},
		mounted(){
			this.isWeiXin()
		}
	}
</script>

<style lang="less" scoped>
	@import '~styles/mixin.less';
	.release{
		position: absolute;
		top: 2.69rem;
		left: 0;
		right: 0;
		background: #fff;
		.desc{
			width: 85%;
			margin: 0 auto;
			padding: .8rem 0;
			text-align: center;
			line-height: .36rem;
			font-size: .24rem;
		}
		.content{
			width: 80%;
			margin: 0 auto;
			select{
				margin-bottom: .3rem;
				width: 100%;
				height: .8rem;
				outline: none;
				border: 1px solid #ccc;
			}
			textarea{
				padding: .15rem;
				margin-bottom: .3rem;
				width: 100%;
				outline: none;
				border: 1px solid #ccc;
			}
			input{
				padding-left: .1rem;
				width: 100%;
				height: .8rem;
				border: 1px solid #ccc;
			}
		}
		.btn{
			margin-top: .5rem;
			height: 1rem;
			line-height: 1rem;
			text-align: center;
			background: #fb2628;
			color: #fff;
			font-size: .34rem;
		}
	}
</style>